<!--
 * @Author: linZeJian
 * @Date: 2022-08-24 10:53:55
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-11-08 09:47:06
 * @Description: 
-->
<template>
  <div v-if="option.display">
    <uni-forms-item
      :label="option.label"
      :required="option.required"
      :rules="[{ required: option.required, errorMessage: '必填项不能为空' }]"
      :name="option.prop"
    >
      <!-- uni-datetime-picker,不再支持单独的时间选择（type=time）// 时间,时间选可使用内置组件 picker -->
      <!-- 自定义组件 -->
      <picker
        mode="time"
        :value="comValue"
        :placeholder="
          option.placeholder ? option.placeholder : '请选择' + option.label
        "
        :style="detailValue ? 'pointer-events: none;' : ''"
        :disabled="detailValue"
        @change="bindTimeChange"
      >
        <view
          v-if="!comValue"
          style="color: #7d7d7d; padding: 6px; border: 1px solid #ebebeb"
        >
          <uni-icons
            type="calendar-filled"
            size="21"
            color="#c4c4c4"
            class="pl6 pr10"
          ></uni-icons
          >
          <span style="margin-top: -10px">
            {{
            option.placeholder ? option.placeholder : "请选择" + option.label
          }}
          </span>
        </view>
        <view v-else style="border: 1px solid #ebebeb; padding: 6px"
          ><uni-icons
            type="calendar-filled"
            size="21"
            color="#c4c4c4"
            class="pl6 pr10"
          ></uni-icons
          >{{ comValue }}</view
        >
      </picker>
    </uni-forms-item>
  </div>
</template>

<script>
export default {
  name: "auni-time",
  props: {
    option: Object,
    value: [String, Number],
  },
  data() {
    return {
      show: true,
    };
  },
  computed: {
    comValue: {
      get() {
        // console.log("this.option :>> ", this.option);
        return this.value;
      },
      set(val) {
        console.log("val", val);
        // 触发value绑定值的交互与更新
        this.$emit("input", val);
      },
    },
    // 处理详情模式
    detailValue() {
      if (this.option.detail) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newV) {},
    },
  },
  methods: {
    bindTimeChange: function (e) {
      // this.show = false;
      console.log("e", e, e.detail.value);
      this.comValue = e.detail.value;
    },
  },
};
</script>

<style scoped></style>
